/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
import './index.css';
let arrowLeft = document.querySelector('.arrow-left');
let arrowRight = document.querySelector('.arrow-right');
let dots = document.querySelectorAll('.dot-box > span');
let ul = document.querySelector('.img-box > ul');
let list = document.querySelectorAll('.img-box > ul > li');
let box = document.querySelector('.box');

// 克隆第一张和最后一张 (无缝切换)
// 1. 把最后一张克隆到第一张 cloneNode(true)
ul.insertBefore(ul.lastElementChild.cloneNode(true), ul.firstElementChild);
// 2. 把第二张克隆到最后一张 cloneNode(true)
ul.appendChild(ul.children[1].cloneNode(true));
// 位置移动到第二张 (克隆完成之后, 第二张才是真正的第一张)
ul.style.transform = 'translateX(-100%)';
// 遇到了问题: 加载js的时候会出现过度效果
// 如何解决 --- 先移动, 然后再恢复过度效果 (延时执行)
setTimeout(() => {
    ul.style.transition = 'transform 1s';
}, 1000);

// 需要控制的值, 标记数值 (初始值)
let index = 1;
// 保存上一次操作的值 (移除类名)
// let lastIndex = 1;

arrowLeft.addEventListener('click', arrowLeftFn);
arrowRight.addEventListener('click', arrowRightFn);

// 下一张函数
function arrowRightFn() {
    //console.log('下一张函数');
    ul.style.transform = `translateX(-${++index}00%)`;
    // 判断是否到达最后一张, 立马跳到第二张 (等到过度效果结束之后才能跳转)
    if (index > list.length) {
        index = 1;
        changeDot(); //更新dot

        // 等待过度效果结束 (transitionend 事件)
        ul.addEventListener(
            'transitionend',
            () => {
                //console.log('完成过度');
                // 关闭过渡效果
                ul.style.transition = 'none';
                // 回到第二张的位置
                ul.style.transform = `translateX(-${index}00%)`;

                // 重置 (更新元素的新样式)
                window.getComputedStyle(ul).transform;

                // 恢复动画
                ul.style.transition = 'transform 0.3s';
            },
            {
                // 绑定一次事件
                once: true,
            }
        );
    }
    changeDot();
}
// 上一张函数
function arrowLeftFn() {
    //console.log('上一张函数');
    ul.style.transform = `translateX(-${--index}00%)`;
    if (index < 1) {
        index = list.length;
        changeDot();

        ul.addEventListener(
            'transitionend',
            () => {
                //console.log('完成过度');
                ul.style.transition = 'none';
                ul.style.transform = `translateX(-${index}00%)`;

                window.getComputedStyle(ul).transform;

                ul.style.transition = 'transform 0.3s';
            },
            {
                once: true,
            }
        );
    }
    changeDot();
}

//更新dot和图片对应
function changeDot() {
    for (let i = 0; i < dots.length; i++) {
        //console.log(dots[i].className);
        dots[i].className = dots[i].className.replace('dot-active', '');
    }
    dots[index - 1].className += 'dot-active';
}

//获取小圆点的位置
for (let i = 0; i < dots.length; i++) {
    dots[i].addEventListener('click', () => {
        index = i + 1;
        ul.style.transform = `translateX(-${index}00%)`;
        changeDot();
    });
}

//定时自动播放
autoPlay();
function autoPlay() {
    timer = setInterval(function () {
        arrowRightFn();
        //console.log(timer);
    }, 3000);
}

box.addEventListener('mouseenter', (e) => {
    //console.log(timer);
    clearInterval(timer);
});

box.addEventListener('mouseleave', (e) => {
    autoPlay();
});

document.addEventListener('visibilitychange', () => {
    //console.log(document.visibilityState);
    //console.log(document.hidden);
    if (document.visibilityState === 'hidden') {
        clearInterval(timer);
    } else {
        clearInterval(timer);
        autoPlay();
    }
});
